<!--
 * 回到首页
 * @Author: xurenda <xurenda@qq.com>
 * @HomePage: https://xurenda.top
 * @Github: https://github.com/xurenda
 * @Date: 2019-11-14 19:18:05
 * @LastEditTime: 2019-11-15 17:31:03
 * @FilePath: \elegant-surf\src\components\search\BackHome.vue
 -->
<template>
<span
  class="icon-button iconfont icon-home"
  :style="style"
  @click="gotoHome"
></span>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'back-home',
  computed: {
    ...mapState({
      theme: state => state.appearanceSetting.theme, // 主题
      rounded: state => state.appearanceSetting.rounded // 圆角效果
    }),
    style() {
      let style = {}
      switch (this.theme) {
        case 'dark':
          style.backgroundColor = 'rgba(0, 0, 0, .5)'
          style.color = '#fff'
          break;
        case 'light':
          style.backgroundColor = 'rgba(255, 255, 255, .5)'
          break;
      }
      if (this.rounded) style.borderRadius = '100px'
      return style
    }
  },
  methods: {
    /**
     * @description: 返回首页
     * @return {void}
     */
    gotoHome() {
      this.$router.push({ path: '/' })
    }
  }
}
</script>

<style lang="stylus">
.icon-button
  width 36px
  height 36px
  border-radius 8px
  font-size 26px
  display flex
  justify-content center
  align-items center
  background-color rgba(255, 255, 255, .5)
  cursor pointer
</style>